<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;

        }
        .banxin{
            width: 1500px;
            height: 700px;
            background-color: #f5f6fa;
            margin-left: 15px;
            /* display: flex; */
        }
        header{
            width: 1500px;
            height: 30px;
            background-color: #0099cc;
            display: flex;
            justify-content: space-between;
        }
        header h4{
            font-size: 18px;
            color: white;
        }
        header h5{
            color: white;
            line-height: 30px;
        }
        .left{
            width: 200px;
            height: 670px;
            background-color: #2c3e50;
        }
        li{
            list-style: none;
            color: white;
            line-height: 30px;
            padding-left: 20px;
            font-size: 14px;
        }
        .right{
            /* display: flex; */
            width: 1300px;
            height: 570px;
            /* border-color: brown; */
        }
        .shouye{
            width: 1300px;
            height: 30px;
            display: flex;
            line-height: 30px;
            justify-content: space-between;
            background-color: #f5f6fa;
        }
        .banxin_xia{
            width: 1500px;
            height: 570px;
            /* background-color: yellow; */
            display: flex;
        }
        .shouru {
            /* background-color: #0096c0; */
            width:1300px ;
            height: 60px;
            display: flex;
            justify-content: space-around;
        }
        .yi,.er,.san,.si{
            width: 300px;
            height: 60px;
            margin: 10px;
            /* text-align: center; */
        }
        .yi{
            background-color: #0096c0;
        }
        .er{
            background-color: #0099cc;
        }
        .san{
            background-color: #15c377;
        }
        .si{
            background-color: #909080;
        }
        .shouru h5{
            margin-left: 10px;
            margin-top: 6px;
        }
        .shouru h2{
            font-size: 22px;
            margin-left: 20px;
        }
        .tu{
            width: 1300px;
            height: 300px;
            margin-top: 30px;
            background-color: #f5f6fa;
            display: flex;
        }
        .tu1,.tu2{
            width: 650px;
            height: 300px;
            background-color: white;
            margin-left: 10px;
        }
        .xuan{
            width: 1300px;
            height: 250px;
            /* background-color: violet; */
            display: flex;
            margin-left: 10px;
        }
        tr{
            width: 30px;
            margin-left: 10px;
        }
        th{
            padding-right: 167px;
            
        }

    </style>
</head>
<body>
    <div class="banxin">
        <header>
            <h4>后台管理系统</h4>
            <h5>当前用户boostrap中文 角色：管理员</h5>
        </header>
        <div class="banxin_xia">
            <div class="left">
                <ul>
                    <li>后台首页</li>
                    <li>设计元素</li>
                    <li>表单元素</li>
                    <li>示例页面</li>
                    <li>常用列表</li>
                    <li>脚本插件</li>
                    <li>统计图表</li>
                </ul>
            </div>
            <div class="right">
                <div class="shouye">
                    <div class="huan">欢迎首页</div>
                    <div class="ying">页面操作</div>
                </div>
                <div class="shouru">
                    <div class="yi">
                    <h5>今日收入</h5>
                    <h2>100,000,00</h2>
                    </div>
                    <div class="er">
                        <h5>昨日收入</h5>
                        <h2>200,000,00</h2>
                    </div>
                    <div class="san">
                        <h5>月度累计收入</h5>
                        <h2>1000,000,00</h2>
                    </div>
                    <div class="si">
                        <h5>年度累计收入</h5>
                        <h2>5000,000,00</h2>
                    </div>
                </div>
                <div class="tu">
                    <div class="tu1"></div>
                    <div class="tu2"></div>
                </div>
                <div class="xuan">
                    <table>
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>订单号</th>
                                <th>商品名称</th>
                                <th>下单日期</th>
                                <th>状态</th>
                                <th>处理情况</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <!-- <td>1</td>
                                <td>12345678</td>
                                <td>黑色休闲裤</td>
                                <td>2019-09-02</td>
                                <td>正常</td>
                                <td>完成度</td>
                            </tr> -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="./页面.js"></script>
<script>
    //左边的图表
    var li1 = document.querySelector('.tu1');
    var e = echarts.init(li1);
    e.setOption({
        title: { //图表的标题
            text: '每月收入',
            left: 'View Report',
        },
        legend: { //图例
            top: 25,
        },
        xAxis: { //x轴设置
            splitLine: {
                show: true
            },
            data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
        },
        yAxis: { //y轴设置
            splitLine: {
                show: true
            }
        },
        series: [ //数据系列
            {
                name: '当前每月收入',
                barWidth: 20, //柱子的宽度
                showBackground: true,//显示背景色
                color: '#7f9ddd',
                type: 'bar',//'line' , 'bar' , 'pie'
                data: [2550, 1550, 1650, 3350, 4800, 3500, 1600,2500,2200,1800,3900,1800]
            },
            {
                name: '周期每月收入',
                barWidth: 20, //柱子的宽度
                showBackground: true,//显示背景色
                color: '#c3e7ff',
                type: 'bar',//'line' , 'bar' , 'pie'
                data: [2200, 1600, 1800, 3000, 4000, 3700, 1800,2000,2800,2200,3800,3700]
            }
        ]
    });
//2.绘制右侧图表
    var li2 = document.querySelector('.tu2')
    var e = echarts.init(li2);
    e.setOption({
        title: { //图表的标题
            text: '每年收入走势',
            left: 'left',
        },
        legend: { //图例
            top: 25,
        },
        xAxis: { //x轴设置
            splitLine: {
                show: true
            },
            data: ['2009', '2010', '2011', '2012', '2113', '2014', '2015', '2016', '2017', '2018', '2019', '2020']
        },
        yAxis: { //y轴设置
            splitLine: {
                show: true
            }
        },
        series: [ //数据系列
            {
                name: '每年收入走势',
                type: 'line',//'line' , 'bar' , 'pie'
                data: [50, 55, 60, 40, 45, 40, 65,40,68,20,72,60],
                symbolSize: 5, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: '#67cb00', //折线颜色
                        lineStyle: { width: 2 }, //折现的宽度
                        shadowBlur: 5,
                        shadowColor: '#188df0'
                    }
                }
            },
            {
                name: '每年同期收入走势',
                type: 'line',//'line' , 'bar' , 'pie'
                data: [48, 50, 52, 48, 40, 35, 65,45,58,30,72,56],
                symbolSize: 5, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: '#909080', //折线颜色
                        lineStyle: { width: 2 }, //折现的宽度
                        shadowBlur: 5,
                        shadowColor: '#188df0'
                    }
                }

            }

        ]
    });
render(data.list)
    function render(data){
        var str=data.map((item,index)=>{
            return`
            <tr>
                <td>${item.id}</td>
                <td>${item.dd}</td>
                <td>${item.name}</td>
                <td>2019-09-02</td>
                <td>${item.status}</td>
                <td>完成度</td>
            </tr>
            `
        }).join('')
        document.querySelector('tbody').innerHTML=str
    }
</script>
</html>